<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        html {
            font-family: sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        body {
            margin: 0;
        }
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        main,
        nav,
        section,
        summary {
            display: block;
        }
        audio,
        canvas,
        progress,
        video {
            display: inline-block;
            vertical-align: baseline;
        }
        audio:not([controls]) {
            display: none;
            height: 0;
        }
        [hidden],
        template {
            display: none;
        }
        a {
            background: 0 0;
        }
        a:active,
        a:hover {
            outline: 0;
        }
        abbr[title] {
            border-bottom: 1px dotted;
        }
        b,
        strong {
            font-weight: 700;
        }
        dfn {
            font-style: italic;
        }
        h1 {
            font-size: 2em;
            margin: 0.67em 0;
        }
        mark {
            background: #ff0;
            color: #000;
        }
        small {
            font-size: 80%;
        }
        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }
        sup {
            top: -0.5em;
        }
        sub {
            bottom: -0.25em;
        }
        img {
            border: 0;
        }
        svg:not(:root) {
            overflow: hidden;
        }
        figure {
            margin: 1em 40px;
        }
        hr {
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            height: 0;
        }
        pre {
            overflow: auto;
        }
        code,
        kbd,
        pre,
        samp {
            font-family: monospace, monospace;
            font-size: 1em;
        }
        button,
        input,
        optgroup,
        select,
        textarea {
            color: inherit;
            font: inherit;
            margin: 0;
        }
        button {
            overflow: visible;
        }
        button,
        select {
            text-transform: none;
        }
        button,
        html input[type=button],
        input[type=reset],
        input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
        }
        button[disabled],
        html input[disabled] {
            cursor: default;
        }
        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0;
        }
        input {
            line-height: normal;
        }
        input[type=checkbox],
        input[type=radio] {
            box-sizing: border-box;
            padding: 0;
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            height: auto;
        }
        input[type=search] {
            -webkit-appearance: textfield;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }
        input[type=search]::-webkit-search-cancel-button,
        input[type=search]::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        fieldset {
            border: 1px solid silver;
            margin: 0 2px;
            padding: 0.35em 0.625em 0.75em;
        }
        legend {
            border: 0;
            padding: 0;
        }
        textarea {
            overflow: auto;
        }
        optgroup {
            font-weight: 700;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        td,
        th {
            padding: 0;
        }
        ul {
            list-style: none;
        }
        li,
        ul {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #fff;
            color: #686868;
            font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "黑体", Arial, sans-serif;
            font-size: 14px;
            line-height: 19.6px;
        }
        a {
            color: #686868;
            text-decoration: none;
            cursor: pointer;
        }
        .icon {
            display: inline-block;
            *display: block;
            *zoom: 1;
        }
        body,
        html {
            height: 100%;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-overflow-scrolling: touch;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
        }
        .container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .loading-wrap {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 8;
            background-color: #f6c65f;
        }
        .loading {
            background-image: url(/uploads/150101/sprite.png);
            background-position: 0 0;
            width: 23px;
            height: 23px;
            top: 50%;
            left: 50%;
            margin: -12px 0 0 -12px;
        }
        .loading-text {
            background-image: url(/uploads/150101/sprite.png);
            background-position: -23px 0;
            width: 99px;
            height: 11px;
            top: 50%;
            left: 50%;
            margin: 25px 0 0 -50px;
        }
        .content-list {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            list-style: none;
        }
        .content-li {
            list-style: none;
            width: 100%;
            position: relative;
        }
        .content-li:first-child {
            background-color: #f6c35f;
        }
        .content-li:nth-child(2) {
            background-color: #f6cd5f;
            -webkit-transition: background-color 1s linear;
            transition: background-color 1s linear;
        }
        .content-li:nth-child(2).fliped {
            background-color: #d6dde7;
        }
        .content-li:nth-child(3) {
            background-color: #31b8b8;
            -webkit-transition: background-color 1s linear;
            transition: background-color 1s linear;
        }
        .content-li:nth-child(3).fliped {
            background-color: #d6dde7;
        }
        .content-li:nth-child(4) {
            background-color: #28b779;
            -webkit-transition: background-color 1s linear;
            transition: background-color 1s linear;
        }
        .content-li:nth-child(4).fliped {
            background-color: #d6dde7;
        }
        .content-li:nth-child(5) {
            background-color: #f6cd5f;
            overflow: hidden;
        }
        .content-li:nth-child(6) {
            background-color: #fbf3e4;
            overflow: hidden;
        }
        .content-li:nth-child(7) {
            background-color: #e25252;
            overflow: hidden;
        }
        .page {
            position: absolute;
            width: 320px;
            left: 50%;
            top: 50%;
            margin-left: -160px;
            height: 300px;
            margin-top: -118px;
        }
        .part {
            position: absolute;
        }
        @-webkit-keyframes eleCircle {
            0% {
                -webkit-transform: rotate(0deg);
            }
            20% {
                -webkit-transform: rotate(72deg);
            }
            40% {
                -webkit-transform: rotate(144deg);
            }
            60% {
                -webkit-transform: rotate(216deg);
            }
            80% {
                -webkit-transform: rotate(288deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes eleCircle {
            0% {
                transform: rotate(0deg);
            }
            20% {
                transform: rotate(72deg);
            }
            40% {
                transform: rotate(144deg);
            }
            60% {
                transform: rotate(216deg);
            }
            80% {
                transform: rotate(288deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .eleCircle {
            -webkit-animation: eleCircle 2s linear infinite;
            animation: eleCircle 2s linear infinite;
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 240dpi) {
            .loading {
                background-image: url(/uploads/150101/sprite@2x.png);
                background-position: 0 0;
                background-size: 122px;
            }
            .loading-text {
                background-image: url(/uploads/150101/sprite@2x.png);
                background-position: -23px 0;
                background-size: 122px;
            }
        }
        .notice-swipe-up {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: 0 -129px;
            width: 41px;
            height: 37px;
            z-index: 2;
            bottom: 32px;
            left: 50%;
            margin-left: -20px;
            opacity: 0;
        }
        .band {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: 0 0;
            width: 92px;
            height: 89px;
            z-index: 4;
            bottom: -8px;
            right: -10px;
            opacity: 0;
            -webkit-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
        }
        .speaker {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -41px -129px;
            width: 26px;
            height: 26px;
            z-index: 8;
            right: 10px;
            top: 10px;
        }
        .speaker_muted {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -131px -80px;
        }
        .avatar {
            width: 39px;
            height: 40px;
        }
        .avatar_1 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -39px -89px;
        }
        .avatar_2 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -92px 0;
        }
        .avatar_3 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -131px 0;
        }
        .avatar_4 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -131px -40px;
        }
        .avatar_5 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: 0 -89px;
        }
        .avatar_6 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -92px -40px;
        }
        .avatar_7 {
            background-image: url(/uploads/150101/sf_icon.png);
            background-position: -78px -89px;
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 240dpi) {
            .notice-swipe-up {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: 0 -129px;
                background-size: 170px;
            }
            .band {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: 0 0;
                background-size: 170px;
            }
            .speaker {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -41px -129px;
                background-size: 170px;
            }
            .speaker_muted {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -131px -80px;
                background-size: 170px;
            }
            .avatar_1 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -39px -89px;
                background-size: 170px;
            }
            .avatar_2 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -92px 0;
                background-size: 170px;
            }
            .avatar_3 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -131px 0;
                background-size: 170px;
            }
            .avatar_4 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -131px -40px;
                background-size: 170px;
            }
            .avatar_5 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: 0 -89px;
                background-size: 170px;
            }
            .avatar_6 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -92px -40px;
                background-size: 170px;
            }
            .avatar_7 {
                background-image: url(/uploads/150101/sf_icon@2x.png);
                background-position: -78px -89px;
                background-size: 170px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="loading-wrap">
        <i class="part loading hardWare eleCircle"></i>
        <span class="part loading-text"></span>
    </div>
    <ul class="content-list">
        <li class="content-li">
            <div class="page p0">
                <div class="part p0__bubble"></div>
                <div class="part p0__t_1"></div>
                <div class="part p0__t_2"></div>
                <div class="part p0__t_3"></div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p1">
                <div class="part flip-container p1__main">
                    <div class="flipper p1__flipper">
                        <div class="front">
                            <div class="f_img p1__f_img"></div>
                        </div>
                        <div class="back">
                            <div class="b_img p1__b_img"></div>
                        </div>
                    </div>
                </div>
                <div class="part of p1__of">
                    <div class="part p1__f_des"></div>
                    <div class="part p1__f_dialogue">
                        <span class="part avatar avatar_1 p1__f_avatar_1"></span>
                        <span class="part bubble_l p1__f_bubble_1"></span>
                    </div>
                    <div class="part p1__f_1"></div>
                    <div class="part p1__f_2"></div>
                    <div class="part band p1__f_band"></div>
                </div>
                <div class="part ob p1__ob">
                    <div class="part p1__b_des"></div>
                    <div class="part p1__b_dialogue">
                        <span class="part avatar avatar_2 p1__b_avatar_1"></span>
                        <span class="part avatar avatar_1 p1__b_avatar_2"></span>
                        <span class="part bubble_r p1__b_bubble_1"></span>
                        <span class="part bubble_l p1__b_bubble_2"></span>
                    </div>
                    <div class="part p1__b_1"></div>
                    <div class="part p1__b_2"></div>
                    <div class="part band p1__b_band"></div>
                </div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p2">
                <div class="part flip-container p2__main">
                    <div class="flipper p2__flipper">
                        <div class="front">
                            <div class="f_img p2__f_img"></div>
                        </div>
                        <div class="back">
                            <div class="b_img p2__b_img"></div>
                        </div>
                    </div>
                </div>
                <div class="part of p2__of">
                    <div class="part p2__f_des"></div>
                    <div class="part p2__f_dialogue">
                        <span class="part avatar avatar_3 p2__f_avatar_1"></span>
                        <span class="part bubble_l p2__f_bubble_1"></span>
                    </div>
                    <div class="part p2__f_1"></div>
                    <div class="part p2__f_2"></div>
                    <div class="part band p2__f_band"></div>
                </div>
                <div class="part ob p2__ob">
                    <div class="part p2__b_des"></div>
                    <div class="part p2__b_dialogue">
                        <span class="part avatar avatar_4 p2__b_avatar_1"></span>
                        <span class="part avatar avatar_3 p2__b_avatar_2"></span>
                        <span class="part bubble_l p2__b_bubble_1"></span>
                        <span class="part bubble_r p2__b_bubble_2"></span>
                    </div>
                    <div class="part p2__b_1"></div>
                    <div class="part p2__b_2"></div>
                    <div class="part band p2__b_band"></div>
                </div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p3">
                <div class="part flip-container p3__main">
                    <div class="flipper p3__flipper">
                        <div class="front">
                            <div class="f_img p3__f_img"></div>
                        </div>
                        <div class="back">
                            <div class="b_img p3__b_img"></div>
                        </div>
                    </div>
                </div>
                <div class="part of p3__of">
                    <div class="part p3__f_des"></div>
                    <div class="part p3__f_dialogue">
                        <span class="part avatar avatar_5 p3__f_avatar_1"></span>
                        <span class="part avatar avatar_6 p3__f_avatar_2"></span>
                        <span class="part avatar avatar_5 p3__f_avatar_3"></span>
                        <span class="part avatar avatar_6 p3__f_avatar_4"></span>
                        <span class="part bubble_l p3__f_bubble_1"></span>
                        <span class="part bubble_r p3__f_bubble_2"></span>
                        <span class="part bubble_l p3__f_bubble_3"></span>
                        <span class="part bubble_r p3__f_bubble_4"></span>
                    </div>
                    <div class="part p3__f_1"></div>
                    <div class="part p3__f_2"></div>
                    <div class="part band p3__f_band"></div>
                </div>
                <div class="part ob p3__ob">
                    <div class="part p3__b_des"></div>
                    <div class="part p3__b_dialogue">
                        <span class="part avatar avatar_7 p3__b_avatar_1"></span>
                        <span class="part avatar avatar_6 p3__b_avatar_2"></span>
                        <span class="part avatar avatar_7 p3__b_avatar_3"></span>
                        <span class="part bubble_l p3__b_bubble_1"></span>
                        <span class="part bubble_r p3__b_bubble_2"></span>
                        <span class="part bubble_l p3__b_bubble_3"></span>
                    </div>
                    <div class="part p3__b_1"></div>
                    <div class="part p3__b_2"></div>
                    <div class="part band p3__b_band"></div>
                </div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p4">
                <div class="part p4__t_1"></div>
                <div class="part p4__t_2"></div>
                <div class="part p4__t_3"></div>
                <div class="part p4__hourglass"></div>
                <div class="part p4__t_4"></div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p5">
                <div class="part p5__extra"></div>
                <div class="part p5__t_1"></div>
                <div class="part p5__t_2"></div>
                <div class="part p5__t_3"></div>
                <div class="part p5__t_4"></div>
                <div class="part p5__lantern"></div>
                <div class="part p5__act-wrap">
                    <p class="part p5__p">2015央视春晚邀您按下手印
                        <br/>一起参与全民“家和万事兴”行动</p>
                    <div class="part p5__print-wrap">
                        <i class="part p5__print"></i>
                        <i class="part p5__scanner scanner"></i>
                    </div>
                </div>
            </div>
        </li>
        <li class="content-li">
            <div class="page p6">
                <div class="part p6__extra"></div>
                <p class="part p6__p" style="display: none;">您是第<span class="p6__number">545123</span>位参与者</p>
                <span class="part p6__share-btn">邀请好友</span>
            </div>
            <div class="share-mask">
                <span class="share-guide"></span>
            </div>
        </li>
    </ul>
    <div class="part notice-swipe-up"></div>
    <div class="part speaker" style="display:none;"></div>
    <audio id="audio" src="http://3glogo.gtimg.com/wxgc/_events/20141120-spring-festival/music/bgm.mp3" loop preload="auto" autoplay="true"></audio>
</div>
<script src="http://wow.techbrood.com/libs/zepto.1.1.4.min.js"></script>
<script src="http://wow.techbrood.com/uploads/150101/jsapi_share.js"></script>
<script src="http://wow.techbrood.com/uploads/150101/head.min.js"></script>
</body>
</html>

<script>
    function $setCookie(a, b, c, d, e, f) {
        var g = new Date,
                c = arguments[2] || null,
                d = arguments[3] || "/",
                e = arguments[4] || null,
                f = arguments[5] || !1;
        c ? g.setMinutes(g.getMinutes() + parseInt(c)) : "", document.cookie = a + "=" + escape(b) + (c ? ";expires=" + g.toGMTString() : "") + (d ? ";path=" + d : "") + (e ? ";domain=" + e : "") + (f ? ";secure" : "")
    }

    function $getCookie(a) {
        var b = new RegExp("(^| )" + a + "(?:=([^;]*))?(;|$)"),
                c = document.cookie.match(b);
        return c ? c[2] ? unescape(c[2]) : "" : null
    }

    function param() {
        return strToJson(location.search, "?", "&")
    }

    function strToJson(a, b, c) {
        var f, g, h, d = a.replace(b, "").split(c),
                e = {};
        for (f = 0, g = d.length; g > f; f++) h = d[f].split("="), e[h[0]] = h[1];
        return e
    }

    function preImg2(a, b) {
        var d, c = $(a).css("background-image");
        return c = c.split("(")[1].split(")")[0], 0 == c.indexOf('"') && (c = c.replace(/\"/g, "")), d = new Image, d.onload = b, d.src = c, d
    }
    $(document).ready(function() {
        var e, f, g, h, i, a = navigator.userAgent.toLowerCase(),
                b = "android" == a.match(/android/i),
                c = a.indexOf("android"),
                d = parseFloat(a.slice(c + 8));
        b && 3 > d ? head.load("/uploads/150101/sf_index_2.js", "/uploads/150101/p0_2.css", "/uploads/150101/p1_2.css", "/uploads/150101/p2_2.css", "/uploads/150101/p3_2.css", function() {
            var a = preImg(".p1__f_img");
            a.onload = function() {
                $(".loading-wrap").css("display", "none"), head.load("/uploads/150101/p4_2.css", "/uploads/150101/p5_2.css", "/uploads/150101/p6_2.css", function() {
                    var a = preImg(".share-guide");
                    a.onload = function() {
                        $(".share-mask").css("display", "none")
                    }
                })
            }
        }) : head.load("/uploads/150101/sf_index.js", "/uploads/150101/p0.css", "/uploads/150101/p1.css", "/uploads/150101/p2.css", "/uploads/150101/p3.css", function() {
            preImg2(".p1__f_img", function() {
                function c() {
                    $("html").on("touchstart", function() {
                        0 == b && (a.play(), b = 1)
                    })
                }
                var a, b;
                $(".loading-wrap").css("display", "none"), a = document.querySelector("audio"), a.oncanplay = c(), b = 0, $(".speaker").css("display", "block"), head.load("/uploads/150101/p4.css", "/uploads/150101/p5.css", "/uploads/150101/p6.css", function() {
                    preImg2(".share-guide", function() {
                        $(".share-mask").css("display", "none")
                    })
                })
            })
        }), e = localStorage ? localStorage.getItem("timer") : "", e = e ? e : $getCookie("spring_pv"), f = "2015央视春晚主题发布!", g = "2015央视春晚邀您一起参与全民“家和万事兴”行动", h = param(), i = "http://yao.qq.com/tv/entry?redirect_uri={#redirect_uri#}&cb41faa22e731e9b={#cb41faa22e731e9b#}&t=" + new Date, i = i.replace("{#redirect_uri#}", encodeURIComponent("http://yaotv.qq.com/shake_tv/proj/spring_festival/index.html")).replace("{#cb41faa22e731e9b#}", h.cb41faa22e731e9b), e && !isNaN(parseInt(e)) ? ($(".p6__number").html(e), $(".part.p6__p").show(), f = "春晚“家和万事兴”行动,我是第" + e + "位参与者!") : $.ajax({
            type: "GET",
            url: "http://yao.qq.com/tv/pv?pageid=1001",
            dataType: "jsonp",
            success: function(a) {
                0 == a["errorCode"] && (a = a["data"], isNaN(parseInt(a["pv"])) || ($(".p6__number").html(a["pv"]), $(".part.p6__p").show(), f = "春晚“家和万事兴”行动,我是第" + a["pv"] + "位参与者!", $(".p5__print-wrap").on("tap", function() {
                    localStorage && localStorage.setItem("timer", a["pv"]), $setCookie("spring_pv", a["pv"], 7200), shaketv.wxShare("/uploads/150101/thumb-logo.jpg", f, g, i)
                }), $(".p5__print-wrap").on("longTap", function() {
                    localStorage && localStorage.setItem("timer", a["pv"]), $setCookie("spring_pv", a["pv"], 7200), shaketv.wxShare("/uploads/150101/thumb-logo.jpg", f, g, i)
                })))
            }
        }), shaketv.wxShare("/uploads/150101/thumb-logo.jpg", f, g, i)
    }), window.onresize = function() {
        $(".content-li").each(function() {
            $(this).css("height", $(window).height())
        }), screenHeight = $(window).height()
    }, setTimeout(function() {
        $(window).resize()
    }, 1e3);
</script>